import { useState } from "react";
import { Outlet, NavLink, Navigate, useNavigate } from "react-router-dom";

/*
  路由跳转的方案：
    1. 声明式导航（声明式路由跳转）
      Link
      NavLink
      Navigate

    2. 编程式导航（编程式路由跳转）
      useNavigate
*/

export default function Pins() {
  const [isNavigate] = useState(false);

  const navigate = useNavigate();

  const handleClick = () => {
    // 编程式导航
    navigate("/pins/new"); // push -> 追加历史记录
  };

  const handleClick1 = () => {
    navigate("/pins/new", {
      // replace -> 替换最后一个历史记录
      replace: true,
    });
  };

  // back
  const handleClick2 = () => {
    navigate(-1); // 浏览历史记录回退一层
  };

  // go
  const handleClick3 = () => {
    navigate(1); // 浏览历史记录前进一层
  };

  return (
    <div>
      <ul>
        <li>
          {/* 
            当路由路径以/开头，跳转的路由地址就是这个地址
            当路由路径不以/开头，会以当前路由地址去拼接 
          */}
          <NavLink to="new">New</NavLink>
        </li>
        <li>
          <NavLink to="/pins/hot">Hot</NavLink>
        </li>
        <li>
          <NavLink to="/pins/following">Following</NavLink>
        </li>
      </ul>

      <div>
        <button onClick={handleClick}>跳转New - push</button>
        <button onClick={handleClick1}>跳转New - replace</button>
        <button onClick={handleClick2}>back</button>
        <button onClick={handleClick3}>go</button>
      </div>
      {/* Navigate: 当组件加载时自动进行路由跳转 */}
      {isNavigate && <Navigate to="/pins/new" />}
      {/* 加载渲染匹配上的下一级路由组件 */}
      <Outlet />
    </div>
  );
}
